import { lazy } from 'react';
import { Navigate, RouterProvider, createBrowserRouter } from 'react-router-dom';

import { ErrorRoutes } from '@/router/routes/error-routes';
import { AuthRoutes } from '@/router/routes/auth-routes';
import CallbackIndex from '@/pages/callback';
import WithRouter from './withRouter';

const LargeScreen = lazy(() => import(`@/pages/micro/largeScreen`))

const LoginRoute = [
  {
    path: '/integration/largeScreen',
    element: <LargeScreen />,
  },
  {
    path: '/integration/callback',
    element: <CallbackIndex />,
  },
  {
    path: '/integration/login',
    Component: lazy(() => import('@/pages/Authentication/Login')),
  },
  {
    path: '/integration/demo',
    Component: lazy(() => import('@/pages/demo')),
  },
  {
    path: '/integration/app1',
    Component: lazy(() => import('@/pages/demo/app1')),
  },
  {
    path: '/integration/app2',
    Component: lazy(() => import('@/pages/demo/app2')),
  },
  {
    path: '/integration/app3',
    Component: lazy(() => import('@/pages/demo/app3')),
  }
];
const PAGE_NOT_FOUND_ROUTE = {
  path: '*',
  element: <Navigate to="/integration/404" replace />,
};

export default function Router() {
  const routes = [{
    element: <WithRouter />,
    children: [...LoginRoute, AuthRoutes, ErrorRoutes, PAGE_NOT_FOUND_ROUTE]
  }];
  const router = createBrowserRouter(routes);

  return <RouterProvider router={router} />;
}
